<template>
  <div class="loginhome">
    <!-- 头部 -->
    <div class="loginheader">
      <span
        class="el-icon-caret-left"
        @click="goback"
        style="cursor: pointer"
      ></span>
      <span>手机号验证</span>
    </div>
    <div style="margin-top: 10px; margin-left: 10px">
      为了安全，我们会向你的手机发送短信验证码
    </div>
    <!-- 登录区域 -->
    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      label-width="100px"
      class="formsty"
    >
      <!-- 验证码 -->
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="输入验证码"
          prefix-icon="el-icon-key"
          class="inputpassword"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 登录按钮 -->
    <el-button type="primary" class="loginbtn" @click="login">下一步</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        captcha: "",
      },

      loginRules: {
        password: [
          { required: true, message: "请输入正确的验证码", trigger: "blur" },
          { min: 1, max: 7, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    var phonenum = this.$route.params.phonenum;
    var password = this.$route.query.password;
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.axios
            .get(
              `http://localhost:3000/captcha/verify?phone=${this.phonenum}&captcha=${this.captcha}`
            )
            .then((res) => {
              this.$router.push("/home");
            })
            .catch((err) => {
              console.log("=====");
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //   返回按钮返回
    goback() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.loginheader {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: red;
  border-bottom: red 1px solid;
  height: 30px;
}
.loginbtn {
  width: 330px;
  margin-top: 30px;
  margin-left: 10px;
  background-color: red;
}
.formsty {
  width: 350px;
  margin-left: -90px;
}
.phoneinput {
  width: 330px;
  margin-top: 20px;
}

.inputpassword {
  width: 330px;
  margin-top: 10px;
}
</style>